; (function () {
    // 步骤3：创建echarts实例
    let myChart = echarts.init(document.querySelector('.box:nth-of-type(1)'))
    console.log(myChart);

    // 步骤4：定义配置（指定图表的配置项和数据）
    let option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '-10%',
            containLabel: true
        },
        xAxis: {
            // type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            show: false,
        },
        yAxis: {
            // type: 'value'
            type: 'category',
            data: ['字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称'],
            // 坐标轴刻度标签的：颜色#9a9fb4、字体14px
            axisLabel: {
                color: "#9a9fb4",
                fontSize: "14"
            },
            // 坐标轴轴线：隐藏
            "axisLine": {
                "show": false
            },
            // 坐标轴刻度：隐藏
            "axisTick": {
                "show": false
            },
        },
        grid: {
            left: 100,
            bottom: 20
        },
        series: [
            {
                data: [120, 99, 30, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                // backgroundStyle: {
                //  color: 'rgba(180, 180, 180, 0.2)'
                // },

                // 柱状图颜色
                color: '#6abaf2',
                backgroundStyle: { // 柱状图背景色
                    color: '#1e2a6a'
                },
                // 图形上的文本标签
                label: {
                    show: true,
                    position: "outside", // 定位外部
                    color: '#65b1e9',
                    fontWeight: 'bold',
                    formatter: "{c}%"
                },
                barWidth: 15,//柱图宽度
            }
        ]
    };
; (function () {
    // 步骤3：创建echarts实例
    let myChart = echarts.init(document.querySelector('.box:nth-of-type(1)'))
    console.log(myChart);

    // 步骤4：定义配置（指定图表的配置项和数据）
    let option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '-10%',
            containLabel: true
        },
        xAxis: {
            // type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            show: false,
        },
        yAxis: {
            // type: 'value'
            type: 'category',
            data: ['字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称'],
            // 坐标轴刻度标签的：颜色#9a9fb4、字体14px
            axisLabel: {
                color: "#9a9fb4",
                fontSize: "14"
            },
            // 坐标轴轴线：隐藏
            "axisLine": {
                "show": false
            },
            // 坐标轴刻度：隐藏
            "axisTick": {
                "show": false
            },
        },
        grid: {
            left: 100,
            bottom: 20
        },
        series: [
            {
                data: [120, 99, 30, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                // backgroundStyle: {
                //  color: 'rgba(180, 180, 180, 0.2)'
                // },

                // 柱状图颜色
                color: '#6abaf2',
                backgroundStyle: { // 柱状图背景色
                    color: '#1e2a6a'
                },
                // 图形上的文本标签
                label: {
                    show: true,
                    position: "outside", // 定位外部
                    color: '#65b1e9',
                    fontWeight: 'bold',
                    formatter: "{c}%"
                },
                barWidth: 15,//柱图宽度
            }
        ]
    };

    // 步骤5：使用刚指定的配置项和数据显示图表
    myChart.setOption(option)


    window.addEventListener = ('resize', () => {
        myChart.resize()
    })
})()
    // 步骤5：使用刚指定的配置项和数据显示图表
    myChart.setOption(option)


    window.addEventListener = ('resize', () => {
        myChart.resize()
    })
})()